<template>
  <a-card :bordered="false">
    <a-row :gutter="24">
      <a-col :md="24">
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="$refs.handleForm.add()">新建广告图</a-button>
        </div>
        <a-card :bordered="false" title="">
          <s-table
            ref="table"
            size="small"
            rowKey="id"
            bordered
            :scroll="{ x: 1500 }"
            :columns="columns"
            :data="loadData"
            :locale="{ emptyText: '暂无内容' }"
          >
            >
            <span slot="status" slot-scope="state, record">
              <template>
                <a-tag color="orange" v-if="state == '0'"
                  >未启用 {{ record.checkUserName ? '/' + record.checkUserName : '' }}</a-tag
                >
                <a-tag color="red" v-if="state == '1'"
                  >启用{{ record.checkUserName ? '/' + record.checkUserName : '' }}</a-tag
                >
              </template>
            </span>

            <span slot="classify" slot-scope="state, record">
              <template>
                <div v-if="state == 'slideshow'">
                  顶部轮播 {{ record.checkUserName ? '/' + record.checkUserName : '' }}
                </div>
                <div v-if="state == 'bannershow'">
                  中部轮播{{ record.checkUserName ? '/' + record.checkUserName : '' }}
                </div>
              </template>
            </span>

            <span slot="sort" slot-scope="sort, record">
              <template>
                <a-input v-model="record.sort" @blur="sortInput(record)" style="width: 100px" />
              </template>
            </span>

            <div slot="custitle" slot-scope="text, item">
              <template >
                <div class="list-content-cover">
                  <a-avatar
                    style="cursor: pointer"
                    @click="preview"
                    v-if="item.url"
                    slot="avatar"
                    :size="60"
                    shape="square"
                    :src="item.url"
                  />
                  <a-avatar
                    style="cursor: pointer"
                    @click="preview"
                    v-else
                    slot="avatar"
                    :size="60"
                    shape="square"
                    src="https://yunpiaowucms-1258011756.cos.ap-beijing.myqcloud.com/ticket/暂无图片_f2db2cd3-d43e-499b-8cf6-940a2aeaaf0f.gif"
                  />
                </div>
                <!-- <div class="list-content-title" @click="handleView(item.id)">
                  <a slot="description" v-if="item.description"><span v-html="$substr(item.description, 15)"></span></a>
                  <a slot="description" v-else><span v-html="$substr(item.subTitle, 15)"></span></a>
                </div> -->
              </template>
            </div>

            <!-- <span slot="cname" slot-scope="text">
							<template>
								<span v-html="$substr(text, 5)"></span>
							</template>
						</span> -->

            <span slot="modelName" slot-scope="text">
              <template>
                <span v-html="$substr(text, 8)"></span>
              </template>
            </span>

            <span slot="action" slot-scope="text, record">
              <template>
                <a-tag color="orange" @click="handleEdit(record)">编辑</a-tag>
                <a-tag color="red" @click="handleDelete(record)">删除</a-tag>
              </template>
            </span>
          </s-table>
        </a-card>
      </a-col>
    </a-row>
    <handle ref="handleForm" @ok="handleOk"></handle>
    <a-modal :visible="previewVisible" :footer="null" @cancel="cancelPreview">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-card>
</template>

<script>
// import { page, treeCategory, delByPk, delByPks, publish, reStaticBatchGenCid, viewContent,updateSort } from '@/api/site/content'
import { selectSlideshow , deleteSlideshow} from '@/api/site/categorySlideshow'
import { listPublihModel } from '@/api/site/model'
import handle from './handle'
import { STable } from '@/components'
import Input from 'ant-design-vue/es/input'
export default {
  name: 'TableList',
  components: {
    STable,
    handle,
  },
  props: {
    statusFilter: {
      type: Function,
      default: undefined,
    },
  },
  data() {
    return {
      mdl: {},
      advanced: false,
      treeData: [],
      selectedKeys: ['0'],
      rightItem: {},
      dropdownVisible: false,
      previewVisible: false,
      previewImage: null,
      status: '-1',
      selectedRowKeys: [],
      selectedRows: [],
      queryParam: {
        dto: {
          categoryId: '0',
        },
      },
      columns: [
        {
          title: '广告图',
          align: 'center',
          dataIndex: 'url',
          width: 100,
          scopedSlots: {
            customRender: 'custitle',
          },
        },
        {
          title: '标题',
          align: 'center',
          dataIndex: 'title',
        },
        {
          title: '分类',
          align: 'center',
          dataIndex: 'classify',
          scopedSlots: {
            customRender: 'classify',
          },
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status',
          },
        },
        // {
        //   title: '排序',
        //   align: 'center',
        //   dataIndex: 'sort',
        //   scopedSlots: {
        //     customRender: 'sort',
        //   },
        // },
		{
          title: '排序',
          align: 'center',
          dataIndex: 'sort',
        },
        {
          title: '跳转路径',
          align: 'center',
          dataIndex: 'pathUrl',
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          fixed: 'right',
          width: '300px',
          scopedSlots: {
            customRender: 'action',
          },
        },
      ],
      loadData: (parameter) => {
        return selectSlideshow(Object.assign(parameter, this.queryParam)).then((response) => {
          if (response.code === 0) {
            // console.log(response.res)
            return response.res
          } else {
            return {
              total: 0,
              rows: [],
            }
          }
        })
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      publishModels: [],
    }
  },
  watch: {
    status(newValue, oldValue) {
      if (newValue === '-1') {
        this.queryParam.dto.status = null
      } else {
        this.queryParam.dto.status = newValue
      }
      this.handleOk()
    },
  },
  created() {
    // this.initTreeCategory()
  },
  methods: {
    // initTreeCategory() {
    // 	treeCategory().then((response) => {
    // 		if (response.code === 0) {
    // 			this.treeData = [response.res]
    // 		}
    // 	})
    // },
    listPublihModel(categoryId) {
      listPublihModel({
        categoryId: categoryId,
      }).then((response) => {
        this.publishModels = response.res
        if (this.publishModels.length === 0) {
          if (categoryId !== '0') {
            this.$message.error('该栏目没有选择模型')
          }
        }
      })
    },
    onSelect(selectedKeys, e) {
      if (e.selected) {
        this.selectedKeys = selectedKeys
      }
      this.queryParam.dto.categoryId = e.node.dataRef.id
      this.$refs.table.refresh()
    },
    rightClick(e) {
      this.selectedKeys = [e.node.eventKey]
      this.rightItem = e.node.dataRef
      this.dropdownVisible = true
      this.listPublihModel(e.node.dataRef.id)
      const _this = this
      setTimeout(() => {
        _this.onSelect(this.selectedKeys, e)
      }, 500)
    },
    createCate(pmodel) {
      const categoryId = this.rightItem.id
      this.$refs.handleForm.add(pmodel, categoryId)
    },
    handleDelete(record) {
      const that = this
      this.$confirm({
        title: '操作提醒',
        content: '确定要删除吗?',
        onOk() {
          deleteSlideshow({
            id: record.id,
          })
            .then((response) => {
              that.handleOk()
              that.$message.info(response.msg)
            })
            .catch((response) => {
              that.$message.warn(response.msg)
            })
        },
        onCancel() {},
      })
    },
    deletes() {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请选择要操作的记录')
        return
      }
      const that = this
      this.$confirm({
        title: '操作提醒',
        content: '确定要删除吗?',
        onOk() {
          deleteSlideshow(that.selectedRowKeys)
            .then((response) => {
              if (response.code === 0) {
                that.$message.info(response.msg)
                that.handleOk()
              } else {
                that.$message.error(response.msg)
              }
            })
            .catch((response) => {
              that.$message.warn(response.msg)
            })
        },
        onCancel() {},
      })
    },
    publish(status) {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请选择要操作的记录')
        return
      }
      const that = this
      this.$confirm({
        title: '操作提醒',
        content: '确定要执行该操作吗?',
        onOk() {
          publish({
            ids: that.selectedRowKeys,
            status: status,
            rows: that.selectedRows,
          })
            .then((response) => {
              if (response.code === 0) {
                that.$message.info(response.msg)
                that.handleOk()
              } else {
                that.$message.error(response.msg)
              }
            })
            .catch((response) => {
              that.$message.warn(response.msg)
            })
        },
        onCancel() {},
      })
    },
    batchGenCid() {
      const _this = this
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请选择要操作的记录')
        return
      }
      this.$confirm({
        title: '操作提醒',
        content: '确定要重新生成静态页面?',
        onOk() {
          reStaticBatchGenCid(_this.selectedRowKeys)
            .then((response) => {
              if (response.code === 0) {
                this.$message.info('请稍后~~')
              } else {
                this.$message.warn(response.msg)
              }
            })
            .catch((response) => {
              this.$message.warn(response.msg)
            })
        },
        onCancel() {},
      })
    },
    // handleView(id) {
    //   viewContent({
    //     id: id,
    //   }).then((response) => {
    //     if (response.code === 0) {
    //       window.open(response.res, '_blank')
    //     } else {
    //       this.$message.error(response.msg)
    //     }
    //   })
    // },
    searchKey(key) {
      this.queryParam.dto.title = null
      if (key) {
        this.queryParam.dto.title = key
      }
      this.$refs.table.refresh(true)
      this.unSelect()
      // this.$refs.handleForm.hideLoading()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    unSelect() {
      this.selectedRowKeys = []
      this.selectedRows = []
    },
    handleEdit(record) {
      // console.log(record)
      this.$refs.handleForm.edit(record)
    },
    preview(e) {
      this.previewImage = e.target.currentSrc
      this.previewVisible = true
    },
    cancelPreview() {
      this.previewImage = null
      this.previewVisible = false
    },
    handleOk() {
      this.unSelect()
      this.$refs.table.refresh()
      // this.initTreeCategory()
      // this.$refs.handleForm.hideLoading()
    },
    resetSearchForm() {
      this.queryParam = {
        dto: {},
      }
      this.handleOk()
    },

    sortInput(record) {
      updateSort({
        contentId: record.id,
        sort: record.sort,
      }).then((response) => {
        // console.log(response)
        location.reload()
      })
    },
  },
}
</script>
<style>
::-webkit-scrollbar-track-piece {
  background-color: whitesmoke !important;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background-color: #e8e8e8 !important;
  background-clip: padding-box;
  min-height: 28px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #e8e8e8 !important;
}

.ant-avatar-lg {
  width: 38px;
  height: 38px;
  line-height: 38px;
}

.list-content-cover {
  width: 100%;
  /* float: left; */
}

.list-content-title {
  width: 80%;
  float: left;
  margin-left: 9px;
  height: 38px;
  line-height: 19px;
}
</style>
